<!DOCTYPE html>
<!--
 * This file is part of Cockpit.
 *
 * Copyright (C) 2015 Red Hat, Inc.
 *
 * Cockpit is free software; you can redistribute it and/or modify it
 * under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation; either version 2.1 of the License, or
 * (at your option) any later version.
 *
 * Cockpit is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
-->

<html>
<head>
    <title translate="yes">Containers</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../base1/patternfly.css" type="text/css" rel="stylesheet">
    <link href="docker.css" type="text/css" rel="stylesheet" id="term-style">
    <script src="../base1/jquery.js"></script>
    <script src="../base1/cockpit.js"></script>
    <script src="../*/po.js"></script>
    <script src="docker.js"></script>
</head>
<body class="pf-m-redhat-font" hidden>

  <!-- CURTAIN -->

  <script id="curtain-tmpl" type="x-template/mustache">
    <div class="curtains-ct blank-slate-pf">
      <div class="blank-slate-pf-icon">
        {{#connecting}}
        <div class="spinner spinner-lg"></div>
        {{/connecting}}
        {{#denied}}
        <div class="fa fa-lock"></div>
        {{/denied}}
        {{#notfound}}
        <div class="fa fa-exclamation-circle"></div>
        {{/notfound}}
        {{#other}}
        <div class="fa fa-exclamation-circle"></div>
        {{/other}}
      </div>
      {{#connecting}}
      <h1 translate="yes">Connecting to Docker</h1>
      {{/connecting}}
      {{#denied}}
      <h1 translate="yes">Not authorized to access Docker on this system</h1>
      {{/denied}}
      {{#notfound}}
      <h1 translate="yes">Docker is not installed or activated on the system</h1>
      {{/notfound}}
      {{#other}}
      <h1 translate="yes">Can&rsquo;t connect to Docker</h1>
      <p>{{.}}</p>
      {{/other}}
      <div class="blank-slate-pf-main-action">
        {{#notfound}}
        <button class="btn btn-primary btn-lg" translate="yes" data-action="docker-start">Start Docker</button>
        {{/notfound}}
        {{#denied}}
        <button class="btn btn-primary btn-lg" translate="yes" data-action="docker-connect">Try again</button>
        {{/denied}}
        {{#other}}
        <button class="btn btn-primary btn-lg" translate="yes" data-action="docker-connect">Try again</button>
        {{/other}}
      </div>
    </div>
  </script>

  <div id="curtain" hidden></div>

  <!-- hidden bar-row to help set a minimum limit for container memory and image space-->
  <div class="bar-row hidden" graph="containers-containers" value="0/100000000"></div>
  <div class="bar-row hidden" graph="containers-images" value="0/100000000"></div>

  <!-- OVERVIEW -->

  <div id="containers" hidden>
    <div class="content-filter"></div>
    <div class="container-fluid page-ct">
      <div class="col-md-12 col-lg-8">
        <div class="row">
          <div class="col-sm-4">
            <div>
              <span class="plot-unit" id="containers-cpu-unit">%</span>
              <span id="containers-cpu-graph-title" class="plot-title"></span>
            </div>
            <div id="containers-cpu-graph"></div>
          </div>
          <div class="col-sm-4">
            <div>
              <span class="plot-unit" id="containers-mem-unit"></span><span class="plot-title" translate="yes">Combined memory usage</span>
            </div>
            <div id="containers-mem-graph"></div>
          </div>
          <div class="col-sm-4">
            <div class="panel-body">
              <div id="containers-storage-details">
              </div>
            </div>
          </div>
        </div>
        <br/>
      </div>
      <div id="containers-containers"></div>
      <div id="containers-images"></div>
    </div>
  </div>

  <!-- CONTAINER DETAILS -->

  <div id="container-details" hidden>
    <div class="content-filter">
      <h3>
        <i class="fa fa-cube fa-fw"></i>
        <span></span>
      </h3>
      <a role="link" tabindex="0" translate="yes">Show all containers</a>
    </div>
    <div class="container-fluid">
      <div class="panel-default panel">
        <div class="panel-heading">
          <span translate>Container:</span>
          <span id="container-details-names"></span>
          <div class="pull-right">
            <button class="btn btn-default" id="container-details-start" translate>Start</button>
            <button class="btn btn-default" id="container-details-stop" translate>Stop</button>
            <button class="btn btn-default" id="container-details-restart" translate>Restart</button>
            <button class="btn btn-danger" id="container-details-delete" translate>Delete</button>
            <button class="btn btn-default" id="container-details-commit"
                    data-toggle="modal" data-target="#container-commit-dialog" translate>Commit</button>
            <div class="spinner spinner-sm" hidden></div>
          </div>
        </div>
        <div class="panel-body">
          <table class="info-table-ct">
            <tbody>
              <tr>
                <td translate>Id:</td>
                <td colspan="3" id="container-details-id"></td>
              </tr>
              <tr>
                <td translate>Created:</td>
                <td colspan="3" id="container-details-created"></td>
              </tr>
              <tr>
                <td translate>Image:</td>
                <td colspan="3">
                <div id="container-details-image"></div>
                <div id="container-details-image-id"></div>
                </td>
              </tr>
              <tr>
                <td translate>Command:</td>
                <td colspan="3" id="container-details-command"></td>
              </tr>
              <tr>
                <td translate>State:</td>
                <td colspan="3" id="container-details-state"></td>
              </tr>
              <tr>
                <td translate>Restart Policy:</td>
                <td colspan="3" id="container-details-restart-policy"></td>
              </tr>
              <tr>
                <td translate="yes">IP Address:</td>
                <td colspan="3" id="container-details-ipaddr"></td>
              </tr>
              <tr>
                <td translate="yes">IP Prefix Length:</td>
                <td colspan="3" id="container-details-ipprefixlen"></td>
              </tr>
              <tr>
                <td translate="yes">Gateway:</td>
                <td colspan="3" id="container-details-gateway"></td>
              </tr>
              <tr>
                <td translate="yes">MAC Address:</td>
                <td colspan="3" id="container-details-macaddr"></td>
              </tr>
              <tr id="container-details-ports-row" hidden>
                <td translate>Ports:</td>
                <td colspan="3" id="container-details-ports"></td>
              </tr>
              <tr id="container-details-links-row" hidden>
                <td translate>Links:</td>
                <td colspan="3" id="container-details-links"></td>
              </tr>
              <tr id="container-details-volumes-row" hidden>
                <td translate>Volumes:</td>
                <td colspan="3" id="container-details-volumes"></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>
                  <!-- hidden bar-row to help set a minimum limit for memory -->
                  <div class="bar-row hidden" graph="container-details" value="0/100000000"></div>
                </td>
              </tr>
              <tr id="container-details-memory-row" class="interactive" hidden>
                <td translate>Memory usage:</td>
                <td colspan="2" id="container-details-memory">
                  <div class="bar-row" graph="container-details"></div>
                </td>
                <td class="shrink resource-value" id="container-details-memory-text"></td>
              </tr>
              <tr id="container-details-cpu-row" class="interactive" hidden>
                <td translate>CPU usage:</td>
                <td colspan="2">
                  <span class="cpu-usage"></span>
                </td>
                <td class="shrink resource-value">
                  <span class="cpu-shares"></span>
                </td>
              </tr>
              <tr id="container-details-resource-row" hidden>
                <td></td>
                <td>
                  <button class="btn btn-default resource-button" data-toggle="modal"
                          data-target="#container-resources-dialog" translate>Change resource limits</button>
                </td>
              </tr>
            </tbody>
          </table>
          <div id="container-terminal" hidden></div>
        </div>
      </div>
    </div>
  </div>

  <!-- IMAGE DETAILS -->

  <div id="image-details" hidden>
    <div class="content-filter">
      <h3>
        <i class="pficon pficon-image"></i>
        <span></span>
      </h3>
      <a role="link" tabindex="0" translate="yes">Show all images</a>
      <div class="content-filter-actions" id="image-details-buttons">
        <button  title="Delete" translate="title" id="image-details-delete"
            class="btn btn-danger btn-delete pficon pficon-delete"></button>
        <button class="btn btn-default" id="image-details-run"
            data-toggle="modal" data-target="#containers_run_image_dialog" translate>Run</button>
        <div class="spinner" hidden></div>
      </div>
    </div>

    <div class="content">
    </div>

    <div class="listing-ct-inline image-details-used container-fluid">
      <div><!-- TODO: This tag is a hack until below code is migrated to React --></div>
      <h3 translate>Used by Containers</h3>
      <div class="panel panel-default" id="image-details-containers">
        <table class="table table-hover">
          <thead>
            <tr>
              <th class="container-column-name" translate>Name</th>
              <th class="container-column-image" translate>Image</th>
              <th class="container-column-command" translate>Command</th>
              <th class="container-column-cpu" translate>CPU</th>
              <th class="container-column-memory-graph" translate>Memory</th>
              <th class="container-column-memory-text"></th>
              <th class="container-column-actions cell-buttons"></th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- STORAGE -->

  <div id="storage" class="container-fluid" hidden>
    <ol class="breadcrumb">
      <li><a role="link" tabindex="0" translate="yes">Containers</a></li>
      <li class="active" translate>Storage</li>
    </ol>

    <div class="blank-slate-pf" id="storage-unsupported" hidden>
      <h1 id="storage-unsupported-message"></h1>
    </div>

    <div id="storage-details">
      <div class="col-sm-6">
        <h3 translate="yes">Overview</h3>
        <div id="storage-overview">
        </div>

        <button id="storage-reset" class="btn btn-default pull-right" translate="yes">Reset</button>
        <h3 translate="yes">Storage pool</h3>
        <div id="storage-pool">
        </div>
      </div>
      <div class="col-sm-offset-1 col-sm-5" id="storage-drives-panel">
        <h3 translate="yes">Additional Storage</h3>
        <div id="storage-drives">
        </div>
      </div>
    </div>

  </div>

  <!-- RUN DIALOG -->

  <script id="port-expose-tmpl" type="x-template/mustache">
    <form class="form-inline dialog-wrapper">
      <button type="button" class="btn btn-default fa fa-plus"></button>
      <button type="button" class="btn btn-default pficon pficon-close"></button>
      <div class="form-group">
        <input type="text" name="container" class="form-control" placeholder="{{placeholder}}">
      </div>
      <div class="form-group">
          <div class="btn-group dropdown port-expose-protocol">
              <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                  <span translate="yes">TCP</span>
                  <i class="fa fa-caret-down pf-c-context-selector__toggle-icon" aria-hidden="true"></i>
              </button>
              <ul class="dropdown-menu">
                  <li><a role="link" tabindex="0" value="TCP" translate>TCP</a></li>
                  <li><a role="link" tabindex="0" value="UDP" translate>UDP</a></li>
              </ul>
          </div>
      </div>
      <div class="form-group">
        <label>{{host_port_label}}</label>
        <input type="text" name="host" class="form-control" placeholder="{{placeholder}}">
      </div>
    </form>
  </script>

  <script id="volume-mount-tmpl" type="x-template/mustache">
    <form class="form-inline">
      <button type="button" class="btn btn-default fa fa-plus"></button>
      <button type="button" class="btn btn-default pficon pficon-close"></button>
      <div class="form-group">
        <input type="text" name="container" class="form-control" placeholder="{{placeholder}}">
      </div>
      <div class="form-group">
        <label>{{host_volume_label}}</label>
        <input type="text" name="host" class="form-control" placeholder="{{placeholder}}">
      </div>
      <div class="form-group">
        <div class="btn-group dropdown mount-mode">
          <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            <span translate="yes">Default</span>
            <i class="fa fa-caret-down pf-c-context-selector__toggle-icon" aria-hidden="true"></i>
          </button>
          <ul class="dropdown-menu">
            <li><a role="link" tabindex="0" translate="yes">Default</a></li>
            <li><a role="link" tabindex="0" translate="yes">ReadWrite</a></li>
            <li><a role="link" tabindex="0" translate="yes">ReadOnly</a></li>
          </ul>
        </div>
      </div>
      <div hidden>
        <span class="help-block"/>
      </div>
      <div hidden>
        <span class="help-block"/>
      </div>
    </form>
  </script>

  <script id="envvar-claim-tmpl" type="x-template/mustache">
    <form class="form-inline">
      <button type="button" class="btn btn-default fa fa-plus"></button>
      <button type="button" class="btn btn-default pficon pficon-close"></button>
      <div class="form-group">
        <label>{{envvar_key_label}}</label>
        <input type="text" name="envvar_key" class="form-control" placeholder="{{placeholder}}">
      </div>
      <div class="form-group">
        <label>{{envvar_value_label}}</label>
        <input type="text" name="envvar_value" class="form-control" placeholder="{{placeholder}}">
      </div>
      <div hidden>
        <span class="help-block"></span>
      </div>
      <div hidden>
        <span class="help-block"></span>
      </div>
    </form>
  </script>

  <script id="container-link-tmpl" type="x-template/mustache">
    <form class="form-inline dialog-wrapper">
      <button type="button" class="btn btn-default fa fa-plus"></button>
      <button type="button" class="btn btn-default pficon pficon-close"></button>
      <div class="form-group">
          <div class="btn-group dropdown link-container">
              <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                  <span><span translate="yes">select container</span></span>
                  <i class="fa fa-caret-down pf-c-context-selector__toggle-icon" aria-hidden="true"></i>
              </button>
              <ul class="dropdown-menu">
                  {{#containers}}<li><a role="link" tabindex="0" value="{{.}}">{{.}}</a></li>{{/containers}}
              </ul>
          </div>
      </div>
      <div class="form-group">
        <label>{{alias_label}}</label>
        <input type="text" name="alias" class="form-control" placeholder="{{placeholder}}">
      </div>
    </form>
  </script>

  <div class="modal" id="containers_run_image_dialog"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" translate>Run Image</h4>
        </div>
        <div class="modal-body">
          <table class="form-table-ct">
            <tbody>
              <tr>
                <td><label class="control-label"
                           translate="yes">Image</label></td>
                <td colspan="4">
                  <span id="containers-run-image"></span>
                </td>
              </tr>
              <tr>
                <td><label class="control-label" for="containers-run-image-name"
                           translate="yes">Container Name</label></td>
                <td colspan="4">
                  <input class="form-control" type="text" id="containers-run-image-name"/>
                </td>
              </tr>
              <tr>
                <td><label class="control-label" for="containers-run-image-command"
                           translate="yes">Command</label></td>
                <td colspan="4">
                  <input class="form-control" type="text" id="containers-run-image-command"/>
                </td>
              </tr>
              <tr id="containers-run-image-memory">
                <td><label class="control-label" translate="yes">Memory limit</label></td>
                <td class="shrink">
                  <input type="checkbox" />
                </td>
                <td>
                  <div class="slider" disabled='true' value="2">
                    <div class="slider-bar">
                      <div class="slider-thumb"></div>
                    </div>
                  </div>
                </td>
                <td class="shrink">
                  <input class="form-control size-text-ct" type='text'/>
                </td>
                <td class="shrink" translate="yes">MiB</td>
              </tr>
              <tr id="containers-run-image-cpu">
                <td><label class="control-label" translate="yes">CPU priority</label></td>
                <td class="shrink">
                  <input type="checkbox" />
                </td>
                <td>
                  <div class="slider" disabled='true' value="1024">
                    <div class="slider-bar">
                      <div class="slider-thumb"></div>
                    </div>
                  </div>
                </td>
                <td class="shrink">
                  <input class="form-control size-text-ct" type='text'/>
                </td>
                <td  class="shrink" translate="yes">shares</td>
              </tr>
              <tr>
                <td><label class="control-label" for="containers-run-image-with-terminal"
                           translate="yes">With terminal</label></td>
                <td class="shrink">
                  <input type="checkbox" id="containers-run-image-with-terminal" checked />
                </td>
              </tr>
              <tr>
                <td><label class="control-label" for="link-containers" translate="yes">Links</label></td>
                <td colspan="4">
                  <label>
                    <input type="checkbox" name="link-containers" id="link-containers" checked="false"/>
                    <span translate>Link to another container</span>
                  </label>
                  <div id="select-linked-containers" class="containers-run-inline">
                  </div>
                </td>
              </tr>
              <tr>
                <td><label class="control-label" for="expose-ports" translate="yes">Ports</label></td>
                <td colspan="4">
                  <label>
                    <input type="checkbox" name="expose-ports" id="expose-ports" checked="false"/>
                    <span translate="yes">Expose container ports</span>
                  </label>
                  <div id="select-exposed-ports" class="containers-run-portmapping containers-run-inline">
                  </div>
                </td>
              </tr>
              <tr>
                <td><label class="control-label" for="mount-volumes" translate="yes">Volumes</label></td>
                <td colspan="4">
                  <label>
                    <input type="checkbox" name="mount-volumes" id="mount-volumes" checked="false"/>
                    <span translate="yes">Mount container volumes</span>
                  </label>
                  <div id="select-mounted-volumes" class="containers-run-volumemount containers-run-inline">
                  </div>
                </td>
              </tr>
              <tr>
                <td><label class="control-label" for="claim-envvars" translate="yes">Environment</label></td>
                <td colspan="4">
                  <label>
                    <input type="checkbox" name="claim-envvars" id="claim-envvars" checked="false"/>
                    <span translate="yes">Set container environment variables</span>
                  </label>
                  <div id="select-claimed-envvars" class="containers-run-envvarclaim containers-run-inline">
                  </div>
                </td>
              </tr>
              <tr>
                <td><label class="control-label" for="restart-policy" translate="yes">Restart Policy</label></td>
                <td colspan="3">
                  <div class="form-inline form-group">
                    <div class="btn-group bootstrap-select dropdown form-control" id="restart-policy-select">
                      <button aria-expanded="false" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                        <span class="pull-left" translate="yes" data-value="no">No</span>
                        <i class="fa fa-caret-down pf-c-context-selector__toggle-icon" aria-hidden="true"></i>
                      </button>
                      <ul class="dropdown-menu" id="restart-policy-dropdown">
                        <li><a role="link" tabindex="0" translate="yes" data-value="no">No</a></li>
                        <li><a role="link" tabindex="0" translate="yes" data-value="on-failure">On Failure</a></li>
                        <li><a role="link" tabindex="0" translate="yes" data-value="always">Always</a></li>
                        <li><a role="link" tabindex="0" translate="yes" data-value="unless-stopped">Unless Stopped</a></li>
                      </ul>
                    </div>
                    <div id="restart-policy-retries-container" class="hidden">
                      <label class="control-label" for="restart-policy-retries" translate="yes">Retries:</label>
                      <input id="restart-policy-retries" class="form-control" type="number" value="0" min="0" name="restart-policy-retries">
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" translate="yes" data-dismiss="modal">Cancel</button>
          <button class="btn btn-primary" id="containers-run-image-run" translate="yes">Run</button>
        </div>
      </div>
    </div>
  </div>

  <!-- SEARCH DIALOG -->

  <div class="modal" id="containers-search-image-dialog"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" translate>Image Search</h4>
        </div>
        <div class="modal-body">
          <div class="form-group has-feedback">
            <input type="search" class="form-control" id="containers-search-image-search"/>
            <span class="fa fa-search form-control-feedback containers-search-image-search-icon"></span>
          </div>

          <div id="containers-search-image-waiting"></div>
          <div id="containers-search-image-results">
            <table class="table table-hover">
              <tbody></tbody>
            </table>
          </div>
          <div id="containers-search-image-no-results">
          </div>
        </div>
        <div class="modal-footer">
          <input type="text" id="containers-search-tag" class="form-control" disabled="disabled" placeholder="Tag" />
          <button class="btn btn-default" translate="yes" data-dismiss="modal">Cancel</button>
          <button class="btn btn-primary" translate="yes" disabled="disabled" id="containers-search-download">Download</button>
        </div>
      </div>
    </div>
  </div>

  <!-- RESOURCE DIALOG -->

  <div class="modal" id="container-resources-dialog"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" translate>Change resources limits</h4>
        </div>
        <div class="modal-body">
          <table class="form-table-ct">
            <tbody>
              <tr>
                <td><label class="control-label" translate="yes">Container Name</label></td>
                <td colspan="3">
                  <span class="container-name"></span>
                </td>
              </tr>
              <tr class="memory-slider">
                <td><label class="control-label" translate="yes">Memory limit</label></td>
                <td class="shrink">
                  <input type="checkbox" />
                </td>
                <td>
                  <div class="slider" disabled='true' value="2">
                    <div class="slider-bar">
                      <div class="slider-thumb"></div>
                    </div>
                  </div>
                </td>
                <td class="shrink">
                  <input class="form-control size-text-ct" type='text'/>
                </td>
                <td class="shrink" translate="yes">MiB</td>
              </tr>
              <tr class="cpu-slider">
                <td><label class="control-label" translate="yes">CPU priority</label></td>
                <td class="shrink">
                  <input type="checkbox" />
                </td>
                <td>
                  <div class="slider" disabled='true' value="1024">
                    <div class="slider-bar">
                      <div class="slider-thumb"></div>
                    </div>
                  </div>
                </td>
                <td class="shrink">
                  <input class="form-control size-text-ct" type='text'/>
                </td>
                <td  class="shrink" translate="yes">shares</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" translate="yes" data-dismiss="modal">Cancel</button>
          <button class="btn btn-primary" translate="yes">Change</button>
        </div>
      </div>
    </div>
  </div>

  <!-- COMMIT DIALOG -->

  <div class="modal" id="container-commit-dialog"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" translate>Commit Image</h4>
        </div>
        <div class="modal-body">
          <table class="form-table-ct">
            <tbody>
              <tr>
                <td><label class="control-label" translate="yes">Container Name</label></td>
                <td colspan="3">
                  <span class="container-name"/>
                </td>
              </tr>
              <tr>
                <td><label class="control-label" translate="yes">Repository</label></td>
                <td colspan="3">
                  <input class="form-control container-repository" type="text"/>
                </td>
              </tr>
              <tr>
                <td><label class="control-label" translate="yes">Tag</label></td>
                <td colspan="3">
                  <input class="form-control container-tag" type="text"/>
                </td>
              </tr>
              <tr>
                <td><label class="control-label" translate="yes">Author</label></td>
                <td colspan="3">
                  <input class="form-control container-author" type="text"/>
                </td>
              </tr>
              <tr>
                <td><label class="control-label" translate="yes">Command</label></td>
                <td colspan="3">
                  <input class="form-control container-command" type="text"/>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" translate="yes" data-dismiss="modal">Cancel</button>
          <button class="btn btn-primary" translate="yes" data-dismiss="modal">Commit</button>
        </div>
      </div>
    </div>
  </div>

  <!-- UNEXPTECTED ERROR DIALOG -->

  <div class="modal" id="error-popup"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" translate="yes">Unexpected error</h4>
        </div>
        <div class="modal-body">
          <p id="error-popup-message"></p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" data-dismiss="modal" translate>Close</button>
        </div>
      </div>
    </div>
  </div>

  <!-- CONFIRMATION DIALOG -->

  <div class="modal" id="confirmation-dialog"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="confirmation-dialog-title"></h4>
        </div>
        <div class="modal-body" id="confirmation-dialog-body">
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" translate="yes" id="confirmation-dialog-cancel">Cancel</button>
          <button class="btn btn-danger" id="confirmation-dialog-confirm">
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- DELETE IMAGE CONFIRMATION DIALOG -->
  <div class="modal" id="delete-image-confirmation-dialog"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="delete-image-confirmation-dialog-title"></h4>
        </div>
        <div class="modal-body">
          <div id="delete-image-confirmation-dialog-body"
               tabindex="-1">
          </div>
          <div id="delete-image-confirmation-dialog-containers">
            <table class="table table-hover">
              <tbody class="listing-ct-body">
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" translate="yes" id="delete-image-confirmation-dialog-cancel">Cancel</button>
          <span data-toggle="tooltip">
            <button class="btn btn-danger" id="delete-image-confirmation-dialog-confirm" />
          </span>
        </div>
      </div>
    </div>
  </div>

</body>
</html>
